<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>多张图片上传</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/js/layui/css/layui.css" media="all">
    <style>
        .layui-upload-img{width: 105px; height: 105px; margin: 0 10px 10px 0;}
    </style>
</head>
<body>
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="test2">
            <i class="layui-icon">&#xe67c;</i>多图片上传</button>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            预览图：
            <div class="layui-upload-list" id="demo2"></div>
        </blockquote>
    </div>
<button type="button" class="layui-btn" id="test9">开始上传</button>

</body>

<script src="${pageContext.request.contextPath}/js/layui/layui.js"></script>
<script>
    var goId = 2;

    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;

        //多图片上传
        upload.render({
            elem: '#test2'
            ,url: '/goods/insertGoodsImg' //改成您自己的上传接口
            ,accept: 'images'  //指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
            ,multiple: true    //表示多文件上传，设置 true即可开启
            ,number:3          //设置同时可上传的文件数量，一般配合 multiple 参数出现。
            ,acceptMime: 'image/*'   //规定打开文件选择框时，筛选出的文件类型，值为用逗号隔开的 MIME 类型列表。如：acceptMime: 'image/*'（只显示图片文件）
            ,auto: false       //取消自动上传，设置 bindAction 参数来指向一个其它按钮提交上传
            ,bindAction: '#test9'       //指向一个其它按钮提交上传  #test9 指按钮 id
            ,choose: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                });
            }
            ,before: function(obj){     //文件上传之前函数回调
                this.data={"goId":goId,"type":"1"}  //携带请求上传接口的额外参数。如：data: {id: 'xxx'}
            }
            ,done: function(res){   //上传后 ，函数回调
                if(res.code == 1001){   //上传成功
                    return layer.msg(res.message);
                }else if(res.code == 1002) {   //如果上传失败
                    return layer.msg(res.message);
                }
            }
        });


    });
</script>

</html>
